<template>
	<view class="u-page fullpage">
		<zx-nav title="物流信息" bg="#fff" fixedTop></zx-nav>
		<view class="tui-order-header">
			<view class="tui-text">
				订单编号：
				<text class="tui-bold">{{ order_no }}</text>
			</view>
			<!-- <view class="tui-text">国内承运人：华南众包站</view> -->
			<view class="tui-text">
				状态：
				<text class="tui-bold">{{ loginfo.state || '暂无状态' }}</text>
			</view>
		</view>
		<view class="tui-order-tracking" v-if="loginfo && loginfo.info">
			<tui-time-axis>
				<tui-timeaxis-item backgroundColor="transparent" v-for="(item, index) in loginfo.info" :key="index">
					<template v-slot:node>
						<view class="tui-node-dot"></view>
					</template>

					<template v-slot:content>
						<view class="tui-order-desc">{{ item.content }}</view>
						<view class="tui-order-time tui-gray">{{ item.time }}</view>
					</template>
				</tui-timeaxis-item>
			</tui-time-axis>
		</view>
	</view>
</template>

<script>
import tuiTimeAxis from '@/components/tui-time-axis/tui-time-axis.vue';
import tuiTimeaxisItem from '@/components/tui-timeaxis-item/tui-timeaxis-item.vue';
export default {
	data() {
		return {
			order_no: '',
			backgroundColor: '#5677fc',
			loginfo: {}
		};
	},
	components: {
		tuiTimeAxis,
		tuiTimeaxisItem
	},
	onLoad(options) {
		this.order_no = options.order_no;
		this.logDetails();
	},
	methods: {
		logDetails() {
			this.$postAction(this.$api.logistics + this.order_no).then(da => {
				if (da.code == 0) {
					this.loginfo = da.data;
				}
			});
		}
	}
};
</script>
<style>
page {
	background-color: #f5f5f5;
}
</style>
<style scoped>
.tui-order-header {
	padding: 30rpx;
	box-sizing: border-box;
	background: #fff;
}

.tui-text {
	font-size: 28rpx;
	color: #333;
	padding: 4rpx;
}

.tui-bold {
	font-weight: bold;
}

.tui-node {
	height: 44rpx;
	width: 44rpx;
	border-radius: 50%;
	background-color: #ddd;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	flex-shrink: 0;
}

.tui-node-dot {
	height: 16rpx;
	width: 16rpx;
	background-color: #ddd;
	border-radius: 50%;
	/* transform: translateY(45%); */
	margin-top: 6rpx;
}

.tui-bg-primary {
	background: #eb0909 !important;
}

.tui-order-tracking {
	padding: 30rpx 30rpx 30rpx 40rpx;
	background: #fff;
	margin-top: 20rpx;
	box-sizing: border-box;
}

.tui-order-title {
	padding-bottom: 12rpx;
	font-size: 32rpx;
	color: #333;
	font-weight: bold;
}

.tui-order-desc {
	padding-bottom: 12rpx;
	font-size: 28rpx;
	color: #333;
}

.tui-ptop {
	display: flex;
	justify-content: flex-start;
	line-height: 28rpx;
}

.tui-order-time {
	font-size: 24rpx;
	font-weight: bold;
}

.tui-gray {
	color: #848484 !important;
}

.tui-light-gray {
	color: #888 !important;
}

.tui-primary {
	color: #5677fc;
}
</style>
